<template>
  <div class="web">
    <div class="webLeft">
      <menuleft :menuList="menuList" @handleMenu="handleMenu" :menuFlag="menuFlag" />
    </div>
    <div class="webRight">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane
          v-for="item in tabPane"
          :key="item.id"
          :label="item.label"
          :name="item.name.toString()"
        ></el-tab-pane>
      </el-tabs>
      <docstatu :menuFlag="menuFlag" :tabPane="tabPane" />
    </div>
  </div>
</template>

<script>
import docstatu from "./documentStation";
import menuleft from "@/components/menuItem/menuleft.vue";
import { getRoleResourceList, allDocTypeList } from "@/service/Api.js"; //接口
export default {
  components: { docstatu, menuleft },
  name: "documentMent",
  data() {
    return {
      activeName: "first",
      leftFlag: false,
      tabPane: [],
      menuList: [
        {
          name: "文档管理",
          id: "0",
          children: [],
        },
      ],
      menuFlag: "",
      send: [],
    };
  },
  created() {
    // this.getUserOnelist()
    this.getTypeList();
  },
  methods: {
    //获取左侧菜单和tab菜单
    getTypeList() {
      allDocTypeList().then((res) => {
        if (res.code === 0) {
          const first = [];
          const send = [];
          res.data.forEach((item) => {
            first.push(item.levelOne);
            send.push(item.levelTwo);
          });
          this.menuFlag = first[0].id.toString();
          this.addMenlist(first);
          this.send = send;
          this.addTabPane(send, 0);
        }
      });
    },
    //切成我想要的数据
    addMenlist(data) {
      //左侧菜单
      data.forEach((item) => {
        this.menuList[0].children.push({
          name: item.docTypeName,
          id: item.id,
          flag: true,
        });
      });

      this.$store.commit("SET_PARENT_ID", this.menuList[0].children[0].id);
    },
    addTabPane(data, index) {
      this.tabPane = [];
      //右侧table
      data[index].forEach((item) => {
        this.tabPane.push({
          label: item.docTypeName,
          name: item.id,
          id: item.id,
        });
      });
      //
    },
    handleClick(val) {
      this.$store.commit("SET_DOCUMENT_TYPE", this.activeName);
    },
    handleMenu(id, index) {
      this.menuFlag = id;
      this.$store.commit("SET_PARENT_ID", id);
      this.addTabPane(this.send, index);
      this.activeName = "first";
    },
    // 获取当前角色下的二级列表
    getUserOnelist() {
      this.checkTree = [];
      let userInfo = sessionStorage.getItem("userInfo");
      this.roleId = JSON.parse(userInfo).roleId;
      getRoleResourceList(this.roleId).then((res) => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            let arr = [];
            res.data.forEach((element, index) => {
              arr.push(element.resourceId);
            });
            // console.log(arr);
            this.checkTree = arr;
          } else {
            this.checkTree = [];
          }
        }
        // console.log(this.checkTree)
        for (var i = 0; i <= this.checkTree.length; i++) {
          if (this.checkTree[i] == 19) {
            this.menuList[0].children[0].flag = true;
          }
          if (this.checkTree[i] == 20) {
            this.menuList[0].children[1].flag = true;
          }
          if (this.checkTree[i] == 21) {
            this.menuList[0].children[2].flag = true;
          }
          if (this.checkTree[i] == 22) {
            this.menuList[0].children[3].flag = true;
          }
        }
        let result = this.checkTree.some((item) => {
          return item == 19;
        });
        if (result == false) {
          let result2 = this.checkTree.some((item) => {
            return item == 20;
          });
          if (result2 == false) {
            let result3 = this.checkTree.some((item) => {
              return item == 21;
            });
            if (result3 == true) {
              this.menuFlag = "13";
            } else {
              this.menuFlag = "14";
            }
          } else {
            this.menuFlag = "12";
          }
        } else {
          this.menuFlag = "12";
        }
      });
    },
  },
};
</script>
<style scoped>
#menu {
  position: fixed;
}
</style>

